<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="20">
        <el-card class="box-card">
          <el-form ref="form" :model="form" label-width="140px" :rules="formRules" label-position="left">
            <el-form-item label="任务名" prop="task_name">
              <el-input v-model="form.task_name" placeholder="给任务起个名字" />
            </el-form-item>
            <el-form-item label="设备选择方式">
              <el-radio-group v-model="form.device_select_mode" @change="handleDeviceSelectModeChange">
                <el-radio-button label="deviceMode">按设备</el-radio-button>
                <el-radio-button label="deviceGroupMode">按分组</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.device_select_mode == 'deviceMode'" label="选择设备" prop="device_ids">
              <el-select v-model="form.device_ids" multiple placeholder="请选择设备">
                <el-option v-for="item in deviceList" :key="item.id" :label="item.name" :value="item.id" />
                <el-pagination
                  :total="deviceTotal"
                  layout="prev, pager, next"
                  @current-change="handleDevicePageChange"
                />
              </el-select>
            </el-form-item>



            <el-form-item v-if="form.device_select_mode == 'deviceGroupMode'" label="选择分组" prop="device_group_ids">
              <el-select v-model="form.device_group_ids" multiple placeholder="请选择分组">
                <el-option v-for="item in deviceGroupList" :key="item.id" :label="item.name" :value="item.id" />
                <el-pagination
                  :total="deviceGroupTotal"
                  layout="prev, pager, next"
                  @current-change="handleDeviceGroupPageChange"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="选择功能">
               <el-checkbox-group v-model="form.checkList">
                  <el-checkbox label="点赞"></el-checkbox>
                  <el-checkbox label="评论"></el-checkbox>
                  <el-checkbox label="关注"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item v-if="form.checkList.indexOf('评论') != '-1'" label="评论话术">
              <el-input
                v-model="form.comment_word"
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
              />
            </el-form-item>
            <el-form-item label="任务执行时间">
              <el-radio-group v-model="form.start_mode">
                <el-radio-button label="now">立即开始</el-radio-button>
                <el-radio-button label="wait">定时开始</el-radio-button>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="延迟时间(分钟)">
              <el-input v-model="form.delay" placeholder="请输入内容" :disabled="form.start_mode === 'now'" @input="handleDelayChange" />
              <el-tag>{{ tips }}</el-tag>
            </el-form-item>

            <el-form-item label="运行时间(分钟)">
              <el-input v-model="form.run_time" placeholder="请输入运行时间" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="isFormDisable" @click="submitForm">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script>

import { getDeviceOnlineList, getDeviceGroupList } from '../../api/device.js'

import { addProvideTask } from '../../api/tiktok-task.js'

import { Message } from 'element-ui'

export default {
  components: {
  },
  data() {
    return {
      form: {
        task_name: '',
        device_select_mode: 'deviceMode', // 选择设备方式
        device_ids: '', // 设备ids
        device_group_ids: '', // 设备分组ids
        open_live_mode: 'tiktok_id', // 进入直播间方式
        start_mode: 'now', // 任务启动方式
        delay: 0, // 延迟时间
        run_time: 10,
        checkList:['点赞'], //功能
        comment_word:"很喜欢你的作品$期待更新作品$会一直关注你的哦$抖音真好，推荐的都是喜欢的作品$打开抖音就是你，缘分$万水千山总是情，回我一个行不行"
      },
      formRules: {
        task_name: [{ required: true, message: '请给任务起个名字', trigger: 'blur' }],
        device_ids: [{ required: true, message: '请选择设备', trigger: 'blur' }],
        device_group_ids: [{ required: true, message: '请选择设备分组', trigger: 'blur' }],
        run_time: [{ required: true, message: '请输入运行时间', trigger: 'blur' }]
      },

      tips: '任务下达后立刻执行', // 定时任务的提醒
      deviceList: [], // 设备列表 在线
      deviceGroupList: [], // 设备分组列表
      deviceListQuery: {
        page: 1,
        search: ''
      },
      deviceGroupListQuery: {
        page: 1,
        search: ''
      },
      deviceTotal: 0,
      deviceGroupTotal: 0,
      isFormDisable: false
    }
  },
  created() {
    this.getDeviceOnlineList()
    this.getDeviceGroupList()
  },
  methods: {
    getDeviceOnlineList() {
      this.listLoading = true
      getDeviceOnlineList(this.deviceListQuery).then(response => {
        if (response.code === 1) {
          this.deviceList = response.data.data
          this.deviceTotal = response.data.total
        }
      })
    },
    getDeviceGroupList() {
      getDeviceGroupList(this.deviceGroupListQuery).then(response => {
        if (response.code === 1) {
          this.deviceGroupList = response.data.data
          this.deviceGroupTotal = response.data.total
        }
      })
    },
    handleDeviceSelectModeChange(val) {
      console.log(this.form.device_select_mode)
      if (val === 'deviceMode') {
        this.formRules.device_ids = [{ required: true, message: '请选择设备', trigger: 'blur' }]
        this.formRules.device_group_ids = []
      } else {
        this.formRules.device_ids = []
        this.formRules.device_group_ids = [{ required: true, message: '请选择设备分组', trigger: 'blur' }]
      }
    },

    handleDevicePageChange(val) {
      this.deviceListQuery.page = val
      this.getDeviceOnlineList()
    },
    handleDeviceGroupPageChange(val) {
      this.deviceGroupListQuery.page = val
      this.getDeviceGroupList()
    },
    handleDelayChange(val) {
      var _d = new Date()
      _d = new Date(_d.valueOf() + 60 * val * 1000)// 当前时间加上1分钟
      this.tips = '设备将在' + this.$tools.dateFormat('YYYY-mm-dd HH:MM', _d) + '执行任务'
    },
    submitForm() {

      this.isFormDisable = true
      this.$refs['form'].validate((valid) => {
        if (valid) {
          addProvideTask(this.form).then(response => {
            if (response.code === 1) {
              Message({
                message: response.msg,
                type: 'success',
                duration: 5 * 1000
              })
            }
          })
        }
      })
      setTimeout(() => {
        this.isFormDisable = false // 点击一次时隔10秒后才能再次点击
      }, 10000)
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
</style>
